<template>
	<view class="" style="height: 100%;">
		<view class="activeBoxs" v-for="i in 10" :key="i" @click="goDynamicDetails">
			<view class="activeBox">
				<view class="flex">
					<view class="avatar" @click="toDetails">
						<image src="/static/test/userheader.jpg" mode="widthFix"></image>
					</view>
					<view style="margin-left: 20rpx;">
						<view style=" color:#000;font-size:26rpx;">单身美女</view>
						<view style="color:#999;font-size:22rpx;">主播・模特・演员</view>
					</view>
				</view>
				<view style="font-size:18rpx;color:#CCC">
					400米・在线
				</view>
			</view>
			<view class="contentBox">
				上午的时间就白白浪费了，一分钟也没挣到，中午的饭怎么办呀
			</view>
			<!-- 图片 -->
			<view class="activePhotos">
				<view class="activePhoto" v-for="i in 5" :key="i">
					<image src="/static/test/userheader.jpg" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 、视频 -->
			<!-- 			<view class="activePhotos">
				<view class="videoBox" @click.stop>
					<video :id="item.id" style="width: 100%;" object-fit="cover"
						src="https://ffa.firstui.cn/uploadfile/241008103906455.mp4"></video>
				</view>
			</view> -->
			<!-- 状态 -->
			<view class="stateBox">
				<view style="font-size:22rpx;color:#B0B0B0">
					今天在线・保定市・小区
				</view>
			</view>
			<!-- 点赞评论等按钮 -->
			<view class="" style="padding-top: 30rpx;">
				<view class="flex" style="justify-content: space-between;">
					<view class="flex">
						<!-- 点赞 -->
						<view class="flex btnBox">
							<fui-icon name="fabulous" color="#B0B0B0" size="50"></fui-icon>
							<view style="margin-left: 10rpx;font-size:22rpx;color:#B0B0B0">
								2
							</view>
						</view>
						<!-- 评论 -->
						<view class="flex btnBox">
							<fui-icon name="edit" color="#B0B0B0" size="50"></fui-icon>
							<view style="margin-left: 10rpx;font-size:22rpx;color:#B0B0B0">
								评论
							</view>
						</view>
						<!-- 打招呼 -->
						<view class="flex btnBox">
							<fui-icon name="message" color="#B0B0B0" size="50"></fui-icon>
							<view style="margin-left: 10rpx;font-size:22rpx;color:#B0B0B0">
								打招呼
							</view>
						</view>
					</view>
					<!-- 更多 -->
					<view class="">
						<fui-icon name="operate" color="#B0B0B0" size="50"></fui-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DynamicList",
		data() {
			return {

			};
		},
		destroyed() {
			console.log('beforeDestroy');
			// this.list.map(v => {
			// 	let video = uni.createVideoContext(v.id, this);
			// 	video.seek(1);
			// 	video.pause();
			// })
		},
		methods: {
			toDetails() {
				uni.navigateTo({
					url: '/myPages/userDetails'
				})
			},
			goDynamicDetails() {
				uni.navigateTo({
					url: '/releasePages/dynamic/details'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.swiper {
		height: 100%;
	}

	.btnBox {
		margin-right: 80rpx;
	}

	.videoBox {
		width: 100%;
		height: 100%;
	}

	.activeBoxs {
		padding: 20rpx;
		background-color: white;
		border-top: 10rpx solid #F9F9F9;
	}

	.avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 100%;

		image {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
		}
	}

	.contentBox {
		padding: 30rpx 0rpx;
		font-size: 26rpx;
	}


	.activePhotos {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx 0rpx;
		padding-top: 5rpx;
	}

	.activePhoto {
		width: 220rpx;
		height: 220rpx;
		background-color: #CCC;
		border-radius: 10rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;

		image {
			border-radius: 10rpx;
			width: 100% !important;
			height: 100% !important;
		}
	}


	.activeBox {
		margin-top: 10rpx;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// border-bottom: 4rpx solid #f6f6f6;
	}
</style>